<!--
 * @author: 十一
 * @since: 2024-04-22
 * index.vue
 * @desc: new page
-->
<template>
  <PageHeader title="资源">
    <template v-slot:S1>
      <a-button key="2" @click="getData">
        <template #icon>
          <i class="iconfont icon-content icon-shuaxin mr-2"></i>
        </template>
        刷新</a-button
      >
      <a-button key="1" type="primary" @click="showDrawer(0, {})">新增</a-button>
    </template>
  </PageHeader>
  <a-form layout="inline">
    <a-form-item class="!mb-4">
      <a-select
        v-model:value="pagination.classify_id"
        placeholder="分类查询"
        allowClear
        style="width: 180px"
        @change="changeclassify"
      >
        <a-select-option :value="item.id" v-for="item in classificationList" :key="item.id">
          {{ item.title }}</a-select-option
        >
      </a-select>
    </a-form-item>
    <a-form-item class="!mb-4">
      <a-input allowClear v-model:value="pagination.title" placeholder="标题查询"> </a-input>
    </a-form-item>
    <a-form-item class="!mb-4">
      <a-input allowClear v-model:value="pagination.description" placeholder="描述查询"> </a-input>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="handleSearch">查询</a-button>
    </a-form-item>
  </a-form>
  <a-table :dataSource="dataSource" :columns="columns" bordered :pagination="false">
    <template #bodyCell="{ column, value }">
      <template v-if="column.key === 'thumbnail'">
        <img :src="value" style="width: 40px; height: auto" />
      </template>
      <template v-if="column.key === 'classifyInfo'">
        {{ value.title }}
      </template>

      <template v-if="column.key === 'link'">
        <a :href="value" target="_blank">{{ value }}</a>
      </template>
      <template v-if="column.key === 'created_at'">
        {{ formatDate(value, 'YYYY-MM-DD HH:MM:SS') }}
      </template>
      <template v-if="column.key === 'operation'">
        <a-tag color="#2db7f5" style="cursor: pointer" @click="showDrawer(1, value)">编辑</a-tag>
        <a-tag color="#f50" style="cursor: pointer" @click="handleDelete(value)">删除</a-tag>
      </template>
    </template>
  </a-table>
  <br />
  <a-pagination
    v-model:current="pagination.current"
    :total="pagination.total"
    @change="changePagination"
    :show-total="(total) => `共 ${total} 数据`"
    style="float: right"
  >
  </a-pagination>
  <ResourceComponents ref="resourceComponentsRefs" @childGetData="getData" />
</template>

<script lang="ts" setup>
import PageHeader from '@/components/pageHeader.vue'
import ResourceComponents from './components/resource-components.vue'
import { reactive, ref, toRaw } from 'vue'
import { getResourceList, deleteResource, getClassificationList } from '@/servers/main'
import { message } from 'ant-design-vue'
import { formatDate } from '@/utils/common'
import type { RootObject } from '@/ts-type'
let pagination = reactive({
  pageSize: 10,
  current: 1,
  classify_id: '',
  title: '',
  description: '',
  total: 0
})
let resourceComponentsRefs: any = ref('')
function changePagination(page: number, pagesize: number) {
  pagination.current = page
  pagination.pageSize = pagesize

  getData()
}
let classificationList = ref()
function changeclassify(value: string) {
  console.log(value)
  if (pagination.classify_id == undefined) {
    pagination.classify_id = ''
  }
  pagination.current = 1
}
// 获取列表
function getData() {
  const { total, ...result } = toRaw(pagination)
  console.log(pagination.classify_id)

  getResourceList(result).then((response: any) => {
    dataSource.value = response.result.list
    pagination.total = response.result.total
  })
}
getData()
function handleSearch() {
  pagination.current = 1
  getData()
}
function getClassification() {
  getClassificationList({ current: 1, pageSize: 1000 }).then((response) => {
    classificationList.value = response.result.list
  })
}
getClassification()
// 删除

function handleDelete(value: any) {
  deleteResource({ id: value.id }).then((responese: any) => {
    if (responese.code === 200) {
      message.success(responese.message)
      console.log(responese)
      pagination.current = 1
      getData()
    } else {
      message.error(responese.message)
    }
  })
}
const drawerOptions = reactive({
  title: '新增资源',
  options: {},
  state: 0
})
function showDrawer(state: number, value: object) {
  console.log(resourceComponentsRefs)
  drawerOptions.state = state
  if (state == 0) {
    drawerOptions.title = '新增资源'
    drawerOptions.options = {}
  } else {
    drawerOptions.title = '编辑'
    drawerOptions.options = value
  }
  resourceComponentsRefs.value.showDrawer(drawerOptions)
}
const dataSource = ref([])
const columns = reactive([
  {
    title: '缩略图',
    dataIndex: 'thumbnail',
    key: 'thumbnail',
    align: 'center',
    width: 80
  },
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
    align: 'center'
  },
  {
    title: '分类',
    dataIndex: 'classifyInfo',
    key: 'classifyInfo',
    align: 'center'
  },
  {
    title: '链接',
    dataIndex: 'link',
    key: 'link',
    align: 'center',
    ellipsis: true
  },
  {
    title: '描述',
    dataIndex: 'description',
    key: 'description',
    align: 'center',
    ellipsis: true
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    key: 'created_at',
    align: 'center'
  },
  {
    title: '操作',
    key: 'operation',
    align: 'center',
    width: 140
  }
])
</script>

<style lang="less" scoped></style>
